import React from 'react'
import GoBack from '@/components/GoBack'
import { useEffect, useState } from 'react';
import { getQuestionsApi } from '@/Api'
import Select from '@/components/Practice/Select'
import './practice.less'
import AcUnitIcon from '@material-ui/icons/AcUnit';
import Question from '../../components/Practice/Question';

export default function Practice(props) {
    const [step, setStep] = useState(0)
    const [testArr, setTestArr] = useState([])
    const state = JSON.parse(localStorage.getItem('prstate'))
    useEffect(() => {
        const { testNum, testType, actionCode, questionType } = state
        getQuestionsApi({
            testNum,
            testType,
            actionCode,
            questionType
        }).then(res => {
            setTestArr(res.data)
            setStep(100 / res.data.length)
        }).catch(err => {
            console.log(err);
        })
    }, [])

    // 滑动的思路：
    // 在 touchstart 的时候，得到一个点的x
    // 在 touchmove 的时候，记录最终点
    // 在 touchend 的时候，做样式的变化(位置)
    let startX = 0, endX = 0
    const [curIndex, setCurIndex] = useState(0)

    const touchStartHandle = (e) => {
        // 记录起始点
        startX = e.touches[0].clientX
    }
    const touchMoveHandle = (e) => {
        // 记录结束点
        endX = e.touches[0].clientX
    }
    const touchEndHandle = () => {
        if(endX === 0) return
        // 判断划动是否超出一定的距离
        if (Math.abs(endX - startX) < 50) return
        // 动起来
        let temp = 0
        if (endX > startX) {
            temp = curIndex - 1 <= 0 ? 0 : curIndex - 1 // 最小判断
            setCurIndex(temp)
        } else {
            temp = curIndex + 1 >= testArr.length - 1 ? testArr.length - 1 : curIndex + 1 // 最大判断
            setCurIndex(temp)
        }
        // 把startX和endX重置
        startX = endX = 0
    }

    return (
        <div className="practice" onTouchStart={touchStartHandle} onTouchEnd={touchEndHandle} onTouchMove={touchMoveHandle}>
            <div className="pra-header">
                <AcUnitIcon />
                <span>{curIndex + 1} / {testArr.length}</span>
            </div>
            <div className="list-container">
                <div className="test-list" style={{ width: 100 * testArr.length + '%', transform: `translateX(${curIndex * step * -1}%)` }}>
                    {
                        testArr.map(item => {
                            return <div key={item.id} style={{ width: 100 / testArr.length + '%' }}>{
                                (()=>{
                                    if(item.questionType === 'one' || item.questionType === 'check' || item.questionType === 'many'){
                                       return <Select data={item} actionCode={state.actionCode}></Select>
                                    }else {
                                        return <Question data={item} actionCode={state.actionCode}/>
                                    }
                                })()
                            }</div>
                        })
                    }
                </div>
            </div>
            <GoBack></GoBack>
        </div>
    )
}
